<template>
  <div class="container">
    <div class="search_header">
      <div class="search_line flex">
        <picker class="smallsearch flex-item" mode="selector"  @change="bindMonthChange" :value="monthindex" :range="monthList" range-key="name">
          <view class="picker flex-item">{{monthname}}</view>
        </picker>
        <picker
          class="bigsearch flex-item"
          mode="selector"
          @change="bindShopChange"
          :value="shopindex"
          :range="shoplist"
          range-key="name"
        >
          <view class="picker flex-item">{{shopname}}</view>
        </picker>
      </div>
      <div class="search_line flex">
        <div class="smallsearch" @tap="search">查询</div>
      </div>
    </div>
    <!-- 表格start -->
    <view id="panel">
      <view class="flex-fixed">
        <text class="fixed-text">员工</text>
        <text class="fixed-text">出勤？</text>
        <text class="fixed-text">请假</text>
        <text class="fixed-text">休息</text>
        <text class="fixed-text">出勤</text>
        <text class="fixed-text">调休</text>
        <text class="fixed-text">加班？</text>
        <text class="fixed-text">加班</text>
      </view>
      <scroll-view
        class="table-content flex"
        scroll-x="true"
        style="width:100%;white-space: nowrap;"
        @scrolltolower="pullUpLoad"
      >
        <view class="db_table" v-for="item in getGuestBaseInfoList" :key="item.id">
          <text class="flex-cell td">{{item.name || ''}}</text>
          <text class="flex-cell td">{{item.qin_ || '0'}}天</text>
          <text class="flex-cell td">{{item.jia || '0'}}天</text>
          <text class="flex-cell td">{{item.xiu || '0'}}天</text>
          <text class="flex-cell td">{{item.qin || '0'}}天</text>
          <text class="flex-cell td">{{item.tiao || '0'}}天</text>
          <text class="flex-cell td">{{item.jia_ || '0'}}天</text>
          <text class="flex-cell td">{{item.jia || '0'}}天</text>
        </view>
      </scroll-view>
    </view>
    <!-- 表格end -->
  </div>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'
import moment from 'moment'
import Toast from '@/utils/toast'
export default {
  data () {
    return {
      getGuestBaseInfoList: [],
      shoplist: [],
      shopindex: 0,
      listshow: false,
      shopid: 0,
      shopname: '',
      pageNo: 1,
      monthList: [
        {
          id: 1,
          name: '一月'
        },
        {
          id: 2,
          name: '二月'
        },
        {
          id: 3,
          name: '三月'
        },
        {
          id: 4,
          name: '四月'
        },
        {
          id: 5,
          name: '五月'
        },
        {
          id: 6,
          name: '六月'
        },
        {
          id: 7,
          name: '七月'
        },
        {
          id: 8,
          name: '八月'
        },
        {
          id: 9,
          name: '九月'
        },
        {
          id: 10,
          name: '十月'
        },
        {
          id: 11,
          name: '十一月'
        },
        {
          id: 12,
          name: '十二月'
        }
      ],
      monthindex: 0,
      monthname: '一月',
      beginTime: '',
      endTime: ''
    }
  },

  components: {
    // Empty
  },
  onLoad (e) {
    if (e) {
      this.shopid = e.shopid
    }
    this.pullUpLoad()
    this.selectshop()
  },
  methods: {
    async get_info () {
      // let shopid = wx.getStorageSync('userInfo').shopid
      this.listshow = true
      const res = await api.getUserKaoqinList({ shopid: this.shopid, beginTime: this.beginTime, endTime: this.endTime });
      console.log(res)
      if (res) {
        this.getGuestBaseInfoList = res.list
        this.listshow = false
      } else {
        this.getGuestBaseInfoList = []
        this.listshow = false
      }
    },
    async selectshop () {
      let orcode = wx.getStorageSync('userInfo').orcode
      const res = await api.selectshop({ orcode: orcode });
      if (res) {
        if (res.code === '100') {
          this.shoplist = res.data
          this.shopname = this.shoplist[this.shopindex].name
        } else {
          Toast(res.msg)
        }
      } else {
        Toast('接口错误！');
      }
    },
    async pullUpLoad () {
      console.log('====左拉====')
      this.listshow = true
      const res = await api.getUserKaoqinList({ shopid: this.shopid, page: this.pageNo, limit: 50 });
      if (res) {
        if (res.list.length > 0) {
          this.getGuestBaseInfoList = this.getGuestBaseInfoList.concat(res.list);
          this.listshow = false
          this.pageNo += 1;
        } else {
          Toast('已经到底了！');
        }
      } else {
        this.getGuestBaseInfoList = []
        this.listshow = false;
        this.pageNo = 1;
      }
      // if (!that.data.hidden) {
      //   that.data.params.pageNo += 1;
      //   that.setData({
      //     params: that.data.params,
      //   })
      //   if (that.data.params.pageNo <= that.data.totalPages) {
      //     that.setData({
      //       hidden: true,
      //     })
      //     that.getShareList();
      //   } else {
      //     that.setData({
      //       hidden: false,
      //     })
      //   }
      // }
    },
    bindShopChange (e) {
      this.shopindex = e.mp.detail.value
      this.shopname = this.shoplist[this.shopindex].name
      this.shopid = this.shoplist[this.shopindex].id
    },
    bindMonthChange (e) {
      this.monthindex = e.mp.detail.value
      let id = this.monthList[this.monthindex].id;
      this.beginTime = moment().month(id - 1).startOf('month').valueOf();
      this.endTime = moment().month(id - 1).endOf('month').valueOf();
      this.monthname = this.monthList[this.monthindex].name
    },
    beginTimeChange (e) {
      console.log(e)
      this.beginTime = e.mp.detail.value;
    },
    endTimeChange (e) {
      console.log(e)
      this.endTime = e.mp.detail.value;
    },
    search () {
      this.get_info()
    },
    beginMoneyinput (e) {
      this.beginMoney = e.mp.detail.value
    },
    endMoneyinput (e) {
      this.endMoney = e.mp.detail.value
    }
  },
  created () {
  },
  onShow () {
  },
  onReady () {
  }
}
</script>

<style scoped>
.container {
  width: 100%;
}
.td {
  width: 130rpx;
}
.search_header {
  position: relative;
  width: 100%;
  height: 300rpx;
  padding: 0 60rpx;
  background: url(http://mytimg.178mr.com/ellipse.png) 50% 100%/150% no-repeat;
  font-size: 30rpx;
  color: rgba(255, 255, 255, 1);
}
/* .search_background {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 442rpx;
  background: url(http://mytimg.178mr.com/ellipse@2x.png) no-repeat;
  background-size: 100%;
  z-index: 2;
} */
.bigsearch {
  width: 300rpx;
  height: 80rpx;
  border-radius: 80rpx;
  /* background: #fff url(http://mytimg.178mr.com/dark%20grey@2x.png) no-repeat; */
  background: #fff;
  background-size: 30rpx;
  background-position: 90% 50%;
  line-height: 80rpx;
  text-align: center;
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}
.smallsearch {
  width: 260rpx;
  height: 80rpx;
  border-radius: 80rpx;
  /* background: #fff url(http://mytimg.178mr.com/dark%20grey@2x.png) no-repeat; */
  background: #fff;
  background-size: 30rpx;
  background-position: 90% 50%;
  line-height: 80rpx;
  text-align: center;
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  margin-left: 20rpx;
}
.search_line {
  margin-bottom: 30rpx;
}
.search_line:last-child {
  margin-bottom: 0;
}
.datachoose {
  text-align: center;
}
.table-content {
  position: relative;
}
.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.td {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  line-height: 80rpx;
  font-size: 24rpx;
  width: 150rpx;
  text-align: center;
}
</style>
<style>
.empty {
  position: absolute;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
</style>
